<template>
	<view class="box flex flex-column justify-center align-center mt-5">
		<view class="top" style="height: 300rpx;">
			<view class="avatar mr-3"
			@click="clickAvater"
				style="width: 200rpx; height: 200rpx; border-radius: 50%; border: 2px solid #a855f7; overflow: hidden; background-color: #fff;">
				<image :src="form.avater" mode="aspectFill" style="height: 100%; width: 100%;"
				
				></image>
			</view>
		</view>

		<view class="list flex flex-column justify-evenly" style="width: 100%; height: 500rpx;">
			<u-line></u-line>
			<view class="nickname flex justify-between align-center px-3" @click="clickName">
				<view style="color: #a855f7;">
					昵称
				</view>
				<view class="flex align-center" style="font-size: 35rpx; font-weight: bold; color: #6b21a8;">
					{{form.nickname}}
					<u-icon style="margin-left: 20rpx;" name="arrow-right" color="#a855f7" size="24"></u-icon>
				</view>
			</view>
			<u-line></u-line>
			<view class="sex flex justify-between align-center px-3" @click="sexShow = true">
				<view style="color: #a855f7;">
					性别
				</view>
				<view class="flex align-center" style="font-size: 35rpx; font-weight: bold; color: #6b21a8;">
					{{form.sex}}
					<u-icon style="margin-left: 20rpx;" name="arrow-right" color="#a855f7" size="24"></u-icon>
				</view>
			</view>
			<u-line></u-line>
			<view class="age flex justify-between align-center px-3" @click="judgeSchool">
				<view style="color: #a855f7;">
					学历
				</view>
				<view class="flex align-center" style="font-size: 35rpx; font-weight: bold; color: #6b21a8;">
					{{form.school}}
					<u-icon style="margin-left: 20rpx;" name="arrow-right" color="#a855f7" size="24"></u-icon>
				</view>
			</view>
			<u-line></u-line>
			<view class="introduction flex justify-between align-center px-3" @click="clickItd">
				<view style="color: #a855f7; width: 20%;">
					简介
				</view>
				<view class="flex align-center justify-end"
					style="font-size: 35rpx; font-weight: bold; color: #6b21a8; width: 80%;">
					{{form.introduction}}
					<u-icon style="margin-left: 20rpx;" name="arrow-right" color="#a855f7" size="24"></u-icon>
				</view>
			</view>
			<u-line></u-line>

			<u-button @click="commit" text="提交" type="primary" color="linear-gradient(to right, rgb(114, 135, 254), rgb(130, 88, 186))"
				style="width: 50%;"></u-button>
		</view>


		<u-picker :show="sexShow" :columns="sexs" @cancel="cancelSex" @confirm="confirmSex" @close="cancelSex"
			:closeOnClickOverlay="true">
		</u-picker>

		<u-picker :show="schoolShow" :columns="schools" @cancel="cancelSchool" @confirm="confirmSchool" ref="uPicker"
			@close="cancelSchool" @change="changeHandler" :closeOnClickOverlay="true">
		</u-picker>
		
		<u-picker :show="TschoolShow" :columns="Tschools" @cancel="TcancelSchool" @confirm="TconfirmSchool" ref="uPicker"
			@close="TcancelSchool" :closeOnClickOverlay="true">
		</u-picker>
		

		<u-overlay :show="nameShow">
			<view class="inputName flex flex-column justify-evenly align-center"
				style="color: #6b21a8; position: absolute; top: 35%; left: 17%; height: 300rpx; width: 500rpx; background-color: #f1e5fe;">
				请输入你的昵称
				<view class="input">
					<u--input maxlength="10" border="surround" v-model="name" color="#6b21a8"></u--input>
				</view>
				<view class="name_btn flex justify-between align-center" style="width: 80%;">
					<u-button @click="nameShow = false" text="取消" size="small" :plain="true" color="#3f3063"
						style="width: 30%;"></u-button>
					<u-button @click="changeName" type="primary" :plain="true" text="确定" size="small" color="#3f3063"
						style="width: 30%;"></u-button>
				</view>
			</view>
		</u-overlay>


		<u-overlay :show="introductionShow">
			<view class="inputName flex flex-column justify-evenly align-center"
				style="color: #6b21a8; position: absolute; top: 35%; left: 17%; height: 300rpx; width: 500rpx; background-color: #f1e5fe;">
				请输入你的简介
				<view class="input">
					<u--input maxlength="25" border="surround" v-model="introduction" color="#6b21a8"></u--input>
				</view>
				<view class="name_btn flex justify-between align-center" style="width: 80%;">
					<u-button @click="introductionShow = false" text="取消" size="small" :plain="true" color="#3f3063"
						style="width: 30%;"></u-button>
					<u-button @click="changeItd" type="primary" :plain="true" text="确定" size="small" color="#3f3063"
						style="width: 30%;"></u-button>
				</view>
			</view>
		</u-overlay>
		
		<u-action-sheet :actions="avaterList" cancelText="取消"  :closeOnClickOverlay="true" 
		:closeOnClickAction="true" @close="closeAvater" @select="selectAvater"
		:show="avaterShow"></u-action-sheet>
	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				user: {},
				name: "",
				school: "",
				introduction: "",
				sex: '',
				avater:"",

				form: {
					nickname: "小朋友",
					school: "?",
					introduction: "你好呀~",
					sex: '?',
					avater:""
				},

				nameShow: false,
				schoolShow: false,
				TschoolShow:false,
				sexShow: false,
				introductionShow: false,
				avaterShow:false,
				
				avaterList:[
				{
					name:"查看头像"
				},
				{
					name:"更换头像"
				}
				],
				sexs: [
					['男', '女']
				],
				schools: [
					['小学', '初中', '高中', '大学'],
					['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
				],
				columnData: [
					['一年级', '二年级', '三年级', '四年级', '四年级', '五年级'],
					['初一', '初二', '初三'],
					['高一', '高二', '高三'],
					['大一', '大二', '大三', '大四', '大五']
				],
				Tschools:[
					['专科','本科','研究生','博士','硕士']
				]
				
				

			}
		},
		onLoad() {
			uni.getStorage({
				key: "jiajiao_demo_account",
				success: res => {
					this.user = res.data	
					this.form.nickname = res.data.nickname
					this.form.sex = res.data.sex
					this.form.school = res.data.school
					this.form.introduction = res.data.introduction
					this.form.avater = res.data.avater ? res.data.avater : (this.user.role == '学生' ? "../../static/student.png" : "../../static/teacher.png")
					this.avater = this.form.avater
				}
			})
			
		},
		methods: {

			//nameInput
			clickName() {
				this.name = this.form.nickname
				this.nameShow = true
			},
			changeName() {
				this.form.nickname = this.name
				this.nameShow = false
			},

			//introductionInput
			clickItd() {
				this.introduction = this.form.introduction
				this.introductionShow = true
			},
			changeItd() {
				this.form.introduction = this.introduction
				this.introductionShow = false
			},
			//sex_picker
			cancelSex() {
				this.sexShow = false
			},
			confirmSex(e) {
				this.form.sex = e.value[0]
				this.sexShow = false
			},
			//school_picker
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			cancelSchool() {
				this.schoolShow = false
			},
			TcancelSchool() {
				this.TschoolShow = false
			},
			confirmSchool(e) {
				this.form.school = e.value[1]
				this.schoolShow = false
			},
			TconfirmSchool(e) {
				this.form.school = e.value[0]
				this.TschoolShow = false
			},
			judgeSchool()
			{
				if(this.user.role == '学生')
				this.schoolShow = true
				else 
				this.TschoolShow = true
			},
			
	async commit()
			{
				if(this.form.name == "" || this.form.sex == '?' || this.form.school == '?')
				uni.showToast({
					title:"有没填好的地方噢~",
					icon:'none'
				})
				else
				{
				uni.showLoading({
					title:"加载中"
				})
				
				if(this.avater != this.form.avater)
			      {
					 await uniCloud.uploadFile({
					  	filePath:this.form.avater,
					  	cloudPath:"avater.jpg"
					  }).then(res=>{
					  	this.form.avater = res.fileID
					  })
				  }
				  
				
			await	db.collection("jiajiao_users").doc(this.user._id).update(this.form).then(res=>{
					uni.hideLoading()
					
					uni.setStorage({
						key:"jiajiao_demo_account",
						data:{
							...this.form,
							_id:this.user._id,
							role:this.user.role		
						}
					})
					
					uni.showToast({
						title:"修改成功",
						duration:1000
					}).then(res=>{
						uni.reLaunch({
							url:"/pages/self/self"
						})
					})
				})
				}
			},
			
			//点击头像
			clickAvater()
			{
				this.avaterShow = true
			},
			closeAvater()
			{
			this.avaterShow = false	
			},
			selectAvater(e)
			{
				if(e.name == '查看头像')
				{
					let imgs = [`${this.form.avater}`]
					uni.previewImage({
						current:0,
						urls:imgs
					})
				}
				else {
					uni.chooseImage({
						count:1,
						sizeType:"compressed",
						sourceType:['album'],
						success: res=> {
								this.form.avater = res.tempFilePaths[0]
							}
					})
					
				}
			}
			

		}

	}
</script>

<style lang="scss">

</style>